import React from 'react'
import { ListView, Toast } from 'antd-mobile';
import Tit from '../../components/Tit'
import OrderShop from '../../components/OrderShop'
import OrderBottom from '../../components/OrderBottom'
import { withRouter } from 'react-router-dom'
import ReactDOM from 'react-dom'
import './Order.less'
class Order extends React.Component {
    constructor(props) {
        super(props)
        const dataSource = new ListView.DataSource({
            rowHasChanged: (row1, row2) => {
                return row1 !== row2
            },
        });
        this.state = {
            title: ['全部', '待付款', '已支付', '已发货', '评价'],
            status: {
                0: '待支付',
                1: '已支付',
                2: '已发货',
                3: '待评价',
                4: '已评价',
                5: '关闭订单',
                '-1': '已取消',
                '-2': "退货",
                '-3': "已退款"
            },
            titleIndex: 0,
            dataSource,
            isLoading: true,
            height: document.documentElement.clientHeight,
            useBodyScroll: true,
            pageIndex: 0
        }
    }
    componentDidUpdate() {
        document.body.style.overflow = 'auto';
    }
    componentDidMount() {
        var aa = 0
        switch (this.props.match.params.id) {
            case '7':
                aa = 0
                break;
            default:
                aa = Number(this.props.match.params.id) + 1
                break;
        }
        this.setState({
            titleIndex: aa
        })
        this.getD(aa)
    }
    getD = (aa) => {
        console.log(aa)
        var data = {}
        if (aa == 0) {
            data = {}
            this.getData(data)
            return
        } else if (aa == 4) {
            data.status = aa + 1
            this.getData(data)
        } else {
            data.status = aa - 1
            this.getData(data)
        }
    }
    onEndReached = (event) => {
        if (this.state.isLoading && !this.state.hasMore) {
            return;
        }
        this.setState({ isLoading: true });
        this.$postData('/api/order/getOrderList', { pageNum: this.state.pageIndex + 1, pageSize: 20, ...this.state.data }, (params) => {
            this.rData = [...this.rData, ...params.data.list];
            this.setState({
                isLoading: false,
                dataSource: this.state.dataSource.cloneWithRows(this.rData),
                pageIndex: this.state.pageIndex + 1
            })

        })
        return
    };
    getData(data) {
        console.log(data)
        const hei = this.state.height - ReactDOM.findDOMNode(this.lv).offsetTop;
        this.$postData('/api/order/getOrderList', { pageNum: 1, pageSize: 20, ...data }, (params) => {
            console.log(params)
            this.setState({
                height: hei,
                isLoading: false,
                dataSource: this.state.dataSource.cloneWithRows(params.data.list),
                pageIndex: 1,
                data: data
            })
            Toast.hide()
            this.rData = params.data.list
        })
    }
    topClick(index) {
        Toast.loading('Loading...');
        this.setState({
            titleIndex: index
        })
        this.getD(index)
    }
    OrderDetails = (id) => {
        this.props.history.push(`/OrderDetails/${id}`)
    }
    render() {
        const separator = (sectionID, rowID) => (
            <div
                key={`${sectionID}-${rowID}`}
                style={{
                    height: 8,
                    // backgroundColor: '#F5F5F9',
                    // borderTop: '1px solid #ECECED',
                    // borderBottom: '1px solid #ECECED',
                }}
            />
        );
        const row = (rowData, sectionID, rowID) => {
            return (
                <div key={rowID}
                    style={{
                        width: '40vw'
                    }}
                    className='Link'
                >
                    <div className='OrderTit-d2'>
                        <div className='OrderTit-d3' onClick={this.OrderDetails.bind(this,rowData.id)}>
                            <p>订单编号:{rowData.orderNo}</p>
                            <p>{this.state.status[rowData.status]}</p>
                        </div>
                        {rowData.voList.map((val, index) => (
                            <div key={index} onClick={this.OrderDetails.bind(this,rowData.id)}><OrderShop ID={0} data={val}></OrderShop></div>
                        ))}
                        {rowData.status === 0 || rowData.status === 2 || rowData.status === 3 ? <OrderBottom data={{ status: rowData.status, orderPayPrice: rowData.orderPayPrice, time: rowData.time, id: rowData.id }}></OrderBottom> : <div></div>}
                        {/* <div style={{ height: '10px', backgroundColor: '#efefef', width: '130%', marginLeft: '-30px' }}></div> */}
                    </div>
                </div>
            );
        };
        return (<div className='OrderTit-page'>
            <Tit zz={true} tit={'我的订单'}></Tit>
            <div className='OrderTit-d1'>
                {this.state.title.map((value, index) => (<p onClick={this.topClick.bind(this, index)} className={this.state.titleIndex == index ? 'p-hov center' : 'center'} key={index}>{value}</p>))}
            </div>
            <ListView
                key='0'
                ref={el => this.lv = el}
                dataSource={this.state.dataSource}
                renderFooter={() => (<div style={{ padding: 30, textAlign: 'center' }}>
                    {this.state.isLoading ? 'Loading...' : 'Loaded'}
                </div>)}
                renderRow={row}
                renderSeparator={separator}
                useBodyScroll={this.state.useBodyScroll}
                onEndReached={this.onEndReached}
                pageSize={5}
            />
        </div>
        )
    }
}

export default withRouter(Order)